class Observer {
    constructor(data) {
        this.observe(data);
    }

    observe(data) {
        if (!data || typeof data !== 'object') {
            return;
        }

        //递归遍历 对象一一去劫持
        Object.keys(data).forEach(key => {
            this.defineReactive(data, key, data[key]);//数据响应式
            this.observe(data[key]);
        });
    }

    defineReactive(obj, key, value) {

        var that = this;
        var dp = new Dep();//每个变化的数据都会对应数组，这个数组是存放所有东西更新的操作

        Object.defineProperty(obj, key, {
            configurable: true, //可删除
            enumerable: true, //可枚举
            get() {
                if (Dep.target) {
                    dp.addSub(Dep.target);
                }
                return value;
            },
            set(newVal) {
                if (newVal !== value) {
                    that.observe(newVal); // 重新赋值如果是对象进行深度劫持
                    value = newVal;
                    dp.notify();//通知更新
                }
            }
        })
    }

}

class Dep {
    constructor() {
        //订阅数组
        this.subs = [];
    }

    addSub(sub) {
        this.subs.push(sub);
    }

    notify() {
        this.subs.forEach(sub => {
            sub.update();
        })
    }

}